<div class="product-div" *ngIf="!selectedProduct">
  <nz-table #smallTable [nzData]="products" nzSize="small" [nzFrontPagination]="false"
            [nzShowTotal]="totalTemplate"
            [nzTotal]="productTotal" [(nzPageIndex)]="productCurrent" [(nzPageSize)]="productPageSize"
            [nzShowPagination]="true"
            [nzLoading]="productLoading" [nzLoadingDelay]="300"
            (nzPageIndexChange)="queryProduct()" (nzPageSizeChange)="queryProduct()"
            nzShowQuickJumper [nzScroll]="{ y: 'calc(100vh - 510px)' }">
    <thead>
    <tr>
      <th>产品名</th>
      <th>ID</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of smallTable.data" (click)="selectProduct(data)">
      <td>{{ data.productName }}</td>
      <td>
        {{data.pid}}
      </td>
    </tr>
    </tbody>
  </nz-table>
  <ng-template #totalTemplate let-total> 一共 {{ total }} 条数据</ng-template>
</div>
<div class="project-div" *ngIf="selectedProduct">
  <div nz-row class="project-nav">
    <div nz-col [nzSm]="4">
      <div class="icon" (click)="selectedProduct=null">
        <i nz-icon nzType="left" nzTheme="outline"></i>返回
      </div>
    </div>
    <div nz-col [nzSm]="18" class="text">{{selectedProduct.productName}}</div>
  </div>
  <nz-table #smallTable [nzData]="projects" nzSize="small" [nzShowPagination]="false"
            [nzLoading]="projectLoading" [nzLoadingDelay]="300"
            [nzScroll]="{ y: 'calc(100vh - 510px)' }">
    <thead>
    <tr>
      <th>项目名</th>
      <th>ID</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of smallTable.data" (click)="selectedProject=data"
        [ngClass]="{'selected-project':data.pid===selectedProject?.pid}">
      <td>{{ data.projectName }}</td>
      <td>
        {{data.pid}}
      </td>
    </tr>
    </tbody>
  </nz-table>
</div>
<div class="buttons">
  <nz-button-group>
    <button nz-button (click)="cancelEvent()">Cancel</button>
    <button nz-button nzType="primary" (click)="selectedSuccess()" [disabled]="!selectedProduct">OK</button>
  </nz-button-group>
</div>
